<template>
  <scroll-view style="height:100vh" scroll-y="true">
    <navTop :title="tabTitle" :showBack="false" titleColor="black" backgroundColor="#fff"></navTop>
    <view style="width:100vw;height:1455rpx;position:relative;">
      <view v-if="detail && detail.id && !detail.closed && !detail.forever" class="rechargeTimer">
        <image @click="activityBack" style="width: 154rpx; height: 60rpx;"
          src="https://res.qiguoread.com/staticResources/fellow_townsman/image/activity-fh.png"></image>
        <view class="rechargeTimer-right">
          <image style="width: 26rpx; height: 26rpx; margin-right: 13rpx"
            src="https://res.qiguoread.com/staticResources/fellow_townsman/image/rechargeClock.png"></image>
          <span>活动倒计时：</span>
          <countDown @countFinish="countFinish" :setTime="detail.endTime" :color="'#FFFFFF'" :fontSize="'24rpx'">
          </countDown>
        </view>

      </view>
      <view v-if="detail && detail.id && detail.forever" class="rechargeTimer">
        <image @click="activityBack" style="width: 154rpx; height: 60rpx;"
          src="https://res.qiguoread.com/staticResources/fellow_townsman/image/activity-fh.png"></image>
        <view class="rechargeTimer-right">
          <image style="width: 26rpx; height: 26rpx; margin-right: 13rpx"
            src="https://res.qiguoread.com/staticResources/fellow_townsman/image/rechargeClock.png"></image>
          <span>活动倒计时：永久</span>
        </view>

      </view>
      <view v-if="detail && detail.id && detail.closed" class="rechargeTimer">
        <image @click="activityBack" style="width: 154rpx; height: 60rpx;"
          src="https://res.qiguoread.com/staticResources/fellow_townsman/image/activity-fh.png"></image>
        <view class="rechargeTimer-right">
          <image style="width: 26rpx; height: 26rpx; margin-right: 13rpx"
            src="https://res.qiguoread.com/staticResources/fellow_townsman/image/rechargeClock.png"></image>
          活动已结束
        </view>

      </view>
      <image v-if="detail && detail.normal && detail.normal.length > 0"
        style="width: 100vw; min-height: 1700rpx;overflow-y: scroll;"
        :src="detail.backgroundImageUrl ? detail.backgroundImageUrl : 'https://res.qiguoread.com/staticResources/fellow_townsman/image/old_activity.png'">
      </image>
      <image v-if="detail && detail.vipDay && detail.vipDay.length > 0"
        style="width: 100vw; min-height: 1700rpx;overflow-y: scroll;"
        src="https://res.qiguoread.com/staticResources/fellow_townsman/image/vip_bg_activity.png"></image>
      <!-- 样式改版 -->
      <!-- 普通档位 -->
      <view v-if="detail && detail.normal && detail.normal.length > 0"
        :class="detail.hue == 1 ? 'recharge-box' : 'recharge-box-leng'">
        <view v-if="detail.amountSettingCount == 3" :class="detail.hue == 1 ? 'recharge-list' : 'recharge-list-leng'">
          <view v-for="(item, index) in detail.normal" :key="index">
            <view @click="clickItem(item, index)" :data-id="item.buttonId" :data-item="item" :data-index="index" :class="detail.hue == 1
              ? index == currentIndex
                ? 'list-item-active-song'
                : 'list-item-song'
              : index == currentIndex
                ? 'list-item-active-leng'
                : 'list-item-leng'
              ">
              <image style="width: 123rpx; height: 90rpx" v-if="index == max"
                src="https://res.qiguoread.com/staticResources/fellow_townsman/image/jinbi_icon3.png"></image>
              <image style="width: 123rpx; height: 83rpx" v-if="index != max && index != min"
                src="https://res.qiguoread.com/staticResources/fellow_townsman/image/jinbi_icon2.png"></image>
              <image style="width: 123rpx; height: 75rpx" v-if="index == min"
                src="https://res.qiguoread.com/staticResources/fellow_townsman/image/jinbi_icon1.png"></image>
              <view :class="index == currentIndex ? 'item-money1' : 'item-money2'">
                {{ item.moneyFen }}
                <span style="color: #773005;font-size: 28rpx;font-weight: bold;display: inline-block;margin-left: 4rpx;">
                  K币
                </span>
              </view>
              <view :class="index == currentIndex ? 'item-present1' : 'item-present'">
                +{{ item.presentMoneyFen }}K币
              </view>

              <view :class="detail.hue == 1
                ? index == currentIndex
                  ? 'activi-item-song'
                  : 'item-song'
                : index == currentIndex
                  ? 'activi-item-song-leng'
                  : 'item-song-leng'">
                多送{{ item.presentMoneyFen / 100 }}元
              </view>
            </view>
            <view class="rechargeBtn">
              <button class="recharge-btn" :data-item="moneyObj" @click="rechargeBtnClick">
                立即抢购￥{{ moneyObj.moneyFen / 100 }}
              </button>
            </view>
          </view>
        </view>
        <view v-for="(item, index) in detail.normal" :key="index">
          <!-- 两个 -->
          <view v-if="detail.amountSettingCount == 2" :data-id="item.buttonId" :data-item="item" :data-index="index"
            @click="rechargeBtnClick" :class="detail.hue == 1 ? 'recharge-item' : 'recharge-item-leng'">
            <image style="width: 110rpx; height: 130rpx"
              src="https://res.qiguoread.com/staticResources/fellow_townsman/image/dangwei_jinbi.png"></image>
            <view style="margin-left: 19rpx">
              <view class="item-title">
                <view :class="detail.hue == 1 ? 'item-money' : 'item-money-leng'">
                  充值{{ item.moneyFen / 100 }}元
                </view>
                <image v-if="detail.hue == 1" style="width: 56rpx; height: 50rpx; margin-left: 32rpx"
                  src="https://res.qiguoread.com/staticResources/fellow_townsman/image/song_icon.png"></image>
                <image v-if="detail.hue == 2" style="width: 56rpx; height: 50rpx; margin-left: 32rpx"
                  src="https://res.qiguoread.com/staticResources/fellow_townsman/image/song_icon_leng.png"></image>
              </view>
              <view>
                <span :style="{
                  color: detail.hue == 1 ? '#E74912' : '#E3253C',
                  'font-size': '50rpx',
                  'font-weight': '500',
                }">
                  {{ item.moneyFen ? item.moneyFen : 0 }}
                </span>

                <span :style="{
                  color: detail.hue == 1 ? '#AF6042' : '#906B67',
                  'font-size': '26rpx',
                  'font-weight': '400',
                  display: 'inline-block',
                }">
                  K币
                </span>
                <span :style="{
                  color: detail.hue == 1 ? '#A0411D' : '#906B67',
                  'font-size': '46rpx',
                  'font-weight': '400',
                  display: 'inline-block',
                }">
                  +{{ item.presentMoneyFen ? item.presentMoneyFen : 0 }}
                </span>
                <span :style="{
                  color: detail.hue == 1 ? '#AF6042' : '#906B67',
                  'font-size': '26rpx',
                  'font-weight': '400',
                  display: 'inline-block',
                }">
                  K币
                </span>
              </view>
            </view>
          </view>
          <!-- 一个 -->
          <view v-if="detail.amountSettingCount == 1" :data-id="item.buttonId" :data-item="item" :data-index="index"
            @click="rechargeBtnClick" :class="detail.hue == 1 ? 'recharge-item1' : 'recharge-item-leng1'
              ">
            <image style="width: 176rpx; height: 200rpx"
              src="https://res.qiguoread.com/staticResources/fellow_townsman/image/dangwei_jinbi.png"></image>
            <view style="margin-left: 30rpx">
              <view class="item-title">
                <view :class="detail.hue == 1 ? 'item-money' : 'item-money-leng'">
                  充值{{ item.moneyFen / 100 }}元
                </view>
                <image v-if="detail.hue == 1" style="width: 56rpx; height: 50rpx; margin-left: 32rpx"
                  src="https://res.qiguoread.com/staticResources/fellow_townsman/image/song_icon.png"></image>
                <image v-if="detail.hue == 2" style="width: 56rpx; height: 50rpx; margin-left: 32rpx"
                  src="https://res.qiguoread.com/staticResources/fellow_townsman/image/song_icon_leng.png"></image>
              </view>
              <view>
                <span :style="{
                  color: detail.hue == 1 ? '#E74912' : '#E43348',
                  'font-size': '60rpx',
                  'font-weight': '500',
                }">
                  {{ item.moneyFen ? item.moneyFen : 0 }}
                </span>
                <span :style="{
                  color: detail.hue == 1 ? '#AF6042' : '#906B67',
                  'font-size': '26rpx',
                  'font-weight': '400',
                  display: 'inline-block',
                }">
                  K币
                </span>
                <span :style="{
                  color: detail.hue == 1 ? '#E74912' : '#E43348',
                  'font-size': '60rpx',
                  'font-weight': '500',
                  display: 'inline-block',
                }">
                  +{{ item.presentMoneyFen ? item.presentMoneyFen : 0 }}
                </span>
                <span :style="{
                  color: detail.hue == 1 ? '#AF6042' : '#906B67',
                  'font-size': '26rpx',
                  'font-weight': '400',
                  display: 'inline-block',
                }">
                  K币
                </span>
              </view>
              <view>
                <button :class="detail.hue == 1
                  ? 'recharge-item-btn'
                  : 'recharge-item-btn-leng'
                  " :data-item="item" @click="rechargeBtnClick">
                  立即抢购￥{{ item.moneyFen / 100 }}
                </button>
              </view>
            </view>
          </view>
        </view>
        <view :class="detail.hue == 1 ? 'activity' : 'activity-leng'">
          <view :class="detail.hue == 1 ? 'activity-title' : 'activity-title-leng'
            ">活动规则</view>
          <view :class="detail.hue == 1 ? 'activity-info' : 'activity-info-leng'">
            <view v-if="detail.activityAvailableNumber != 2147483647" style="display: flex; align-items: center">
              <view :class="detail.hue == 1 ? 'activity-yuan' : 'activity-yuan-leng'
                "></view>
              每人仅可充值{{ detail.activityAvailableNumber }}次;
            </view>
            <view style="display: flex; align-items: center">
              <view :class="detail.hue == 1 ? 'activity-yuan' : 'activity-yuan-leng'
                "></view>
              此充值为K币充值;
            </view>
            <view style="display: flex; align-items: center">
              <view :class="detail.hue == 1 ? 'activity-yuan' : 'activity-yuan-leng'
                "></view>
              K币为虚拟产品,购买后不可退换,敬请谅解;
            </view>
            <view style="display: flex; align-items: center">
              <view :class="detail.hue == 1 ? 'activity-yuan' : 'activity-yuan-leng'
                "></view>
              活动最终解释权归本公司所有.
            </view>
          </view>
        </view>
      </view>
      <!-- 会员日档位 -->
      <view v-if="detail && detail.vipDay && detail.vipDay.length > 0"
        :class="detail.hue == 1 ? 'recharge-box' : 'recharge-box-leng'">
        <!-- 会员日档位 -->
        <!-- 三个 -->
        <view v-if="detail.amountSettingCount == 3" class="recharge-list">
          <view v-for="(item, index) in detail.vipDay" :key="index">
            <view @click="clickItem(item, index)" :data-id="item.buttonId" :data-item="item" :data-index="index" :class="index == currentIndex ? 'list-item-active' : 'list-item'
              ">
              <view :class="index == currentIndex ? 'activi-item-top' : 'item-top'
                ">5折特惠</view>
              <image style="width: 123rpx; height: 94rpx" v-if="index == maxVip"
                src="https://res.qiguoread.com/staticResources/fellow_townsman/image/jinbi_icon3.png"></image>
              <image style="width: 123rpx; height: 83rpx" v-if="index != maxVip && index != minVip"
                src="https://res.qiguoread.com/staticResources/fellow_townsman/image/jinbi_icon2.png"></image>
              <image style="width: 123rpx; height: 75rpx" v-if="index == minVip"
                src="https://res.qiguoread.com/staticResources/fellow_townsman/image/jinbi_icon1.png"></image>
              <view :class="index == currentIndex ? 'item-money1' : 'item-money2'">
                {{ item.moneyFen * 2 }}
                <span style="color: #773005;font-size: 28rpx;font-weight: bold;display: inline-block;margin-left: 4rpx;">
                  K币
                </span>
              </view>
              <view :class="index == currentIndex ? 'item-present1' : 'item-present'
                ">
                原价￥{{ (item.moneyFen / 100) * 2 }}
              </view>
            </view>
            <view class="rechargeBtn">
              <button class="recharge-btn" :data-item="moneyObjVip" @click="rechargeBtnClick">
                立即抢购￥{{ moneyObjVip.moneyFen / 100 }}
              </button>
            </view>
          </view>
        </view>
        <view v-for="(item, index) in detail.vipDay" :key="index">
          <!-- 两个 -->
          <view v-if="detail.amountSettingCount == 2" :data-id="item.buttonId" :data-item="item" :data-index="index"
            @click="rechargeBtnClick" class="recharge-item">
            <image style="width: 110rpx; height: 130rpx"
              src="https://res.qiguoread.com/staticResources/fellow_townsman/image/dangwei_jinbi.png"></image>
            <view style="margin-left: 19rpx">
              <view class="item-title">
                <view class="item-money">
                  充值{{ item.moneyFen / 100 }}元
                </view>
                <image style="width: 56rpx; height: 50rpx; margin-left: 32rpx"
                  src="https://res.qiguoread.com/staticResources/fellow_townsman/image/wuzhe_icon.png"></image>
              </view>
              <view>
                <span style="color: #e74912; font-size: 50rpx; font-weight: 500">
                  {{ item.moneyFen ? item.moneyFen * 2 : 0 }}
                </span>
                <span :style="{
                  'color': '#AF6042',
                  'font-size': '26rpx',
                  'font-weight': '400',
                  display: 'inline-block',
                }">
                  K币
                </span>

                <span :style="{
                  'color': '#C78C68',
                  'font-size': '34rpx', 'font-family': 'Source Han Sans CN',
                  'font-weight': '400',
                  'display': 'inline-block',
                  'text-decoration': 'line-through', 'text-decoration-color': '#a46844', 'margin-left': '6rpx',
                }">
                  原价￥{{ (item.moneyFen / 100) * 2 }}
                </span>
              </view>
            </view>
          </view>
          <!-- 一个 -->
          <view v-if="detail.amountSettingCount == 1" :data-id="item.buttonId" :data-item="item" :data-index="index"
            @click="rechargeBtnClick" class="recharge-item1">
            <image style="width: 176rpx; height: 200rpx"
              src="https://res.qiguoread.com/staticResources/fellow_townsman/image/dangwei_jinbi.png"></image>
            <view style="margin-left: 30rpx">
              <view class="item-title">
                <view class="item-money">
                  充值{{ item.moneyFen / 100 }}元
                </view>
                <image style="width: 55rpx; height: 48rpx; margin-left: 40rpx"
                  src="https://res.qiguoread.com/staticResources/fellow_townsman/image/wuzhe_icon.png"></image>
              </view>
              <view>
                <span :style="{
                  'color': '#E74912',
                  'font-size': '60rpx',
                  'font-weight': '500',
                }">
                  {{ item.moneyFen ? item.moneyFen * 2 : 0 }}
                </span>
                <span :style="{
                  'color': '#AF6042',
                  'font-size': '26rpx',
                  'font-weight': '400',
                  'display': 'inline-block',
                }">
                  K币
                </span>
                <span :style="{
                  'color': '#C78C68',
                  'font-size': '34rpx', 'font-family': 'Source Han Sans CN',
                  'font-weight': '500',
                  'display': 'inline-block',
                  'text-decoration': 'line-through', 'text-decoration-color': '#a46844', 'margin-left': '6rpx',
                }">
                  原价￥{{ (item.moneyFen / 100) * 2 }}
                </span>
              </view>
              <view>
                <button class="recharge-item-btn" :data-item="item" @click="rechargeBtnClick">
                  立即抢购￥{{ item.moneyFen / 100 }}
                </button>
              </view>
            </view>
          </view>
        </view>
        <view class="activity">
          <view class="activity-title">活动规则</view>
          <view class="activity-info">
            <view v-if="detail.activityAvailableNumber != 2147483647" style="display: flex; align-items: center">
              <view class="activity-yuan"></view>
              每人仅可充值{{ detail.activityAvailableNumber }}次;
            </view>
            <view style="display: flex; align-items: center">
              <view class="activity-yuan"></view>
              此充值为K币充值;
            </view>
            <view style="display: flex; align-items: center">
              <view class="activity-yuan"></view>
              K币为虚拟产品,购买后不可退换,敬请谅解;
            </view>
            <view style="display: flex; align-items: center">
              <view class="activity-yuan"></view>
              活动最终解释权归本公司所有.
            </view>
          </view>
        </view>
      </view>
    </view>

    <zwyPopupAll :showClose="false" :maskCanClose="false" ref="zwyPopupAll">
      <view class="endBox" v-if="popupType == 'activityEnd'">
        <view class="endTitle">抱歉~活动已结束</view>
        <view class="endDes">下次记得早点来哦</view>
        <view hover-class="endHover" @click="watchJuji" class="endBtn">去看剧</view>
      </view>
      <view class="endBox" v-if="popupType == 'timesOut'">
        <view class="endTitle">您已购买过啦!</view>
        <view class="endDes">下次再来参加活动吧</view>
        <view hover-class="endHover" @click="watchJuji" class="endBtn">去看剧</view>
      </view>
      <view class="endBox1" v-if="popupType == 'chongzhiSuccess'">
        <image class="endTImg" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/chongzhi_suc.png">
        </image>
        <view hover-class="endHover" @click="watchJuji" class="endBtn">去看剧</view>
      </view>
      <view class="wabliu_Box" v-if="popupType == 'wanliuSuccess'">
        <view class="wabliu-Title">
          <view class="wabliu-Title-money">￥</view>
          <view class="wabliu-num">
            {{ Math.ceil(detail.retrieve.presentMoneyFen / 100) }}
          </view>
          <image class="wabliu-lijian"
            src="https://res.qiguoread.com/staticResources/fellow_townsman/image/lijian_icon.png"></image>
        </view>
        <view class="wabliu-endDes">仅此页面可用</view>
        <view hover-class="endHover" @click="rechargeBtnClick" :data-item="detail.retrieve" class="wabliu-btn">
          {{ detail.retrieve.moneyFen / 100 }}
          购{{ detail.retrieve.moneyFen + detail.retrieve.presentMoneyFen }}K币
        </view>
        <image class="wabliu-closeImg" @click="closeWlPop"
          src="https://res.qiguoread.com/staticResources/fellow_townsman/image/hongbao_closeWhite.png"></image>
      </view>
      <view class="activity_Box" v-if="popupType == 'activityFail'">
        <image class="activity-img"
          src="https://res.qiguoread.com/staticResources/fellow_townsman/image/activity_img.png"></image>
        <view class="activity-Title">距离活动开始还有</view>
        <view class="activity-time">
          <wlCount @countFail="countFail" :setTime="detail.startTime" :color="'#A0411D'" :fontSize="'36rpx'"></wlCount>
        </view>
        <view hover-class="endHover" @click="watchJuji" class="endBtn">去看剧</view>
      </view>
    </zwyPopupAll>
  </scroll-view>
</template>
<script>
import zUtil from "../../util/util.js";
import wlCount from "./components/wlCount.vue";
import countDown from "./components/countDown.vue";
export default {
  components: {
    wlCount,
    countDown,
  },
  data() {
    return {
      startTime: "",
      endTime: "",
      statusBarHeight: uni.getSystemInfoSync()['statusBarHeight'] || 20, // 顶部高度状态栏
      popupType: "",
      outId: "CPS_TOP_UP_ACTIVITY_174",
      detail: {
        // startTime:new Date().getTime()+3600000
      },
      max: null,
      min: null,
      maxVip: null,
      minVip: null,
      currentIndex: 1,
      tabTitle: "K币充值特惠限时抢购",
      showActivityFlag: true,
      payOrderId: "",
      appId: "",
      queryData: "",
      moneyObj: {},
      moneyObjVip: {},
      retrieveFlag: true,
      isIos: getApp().globalData.isIos,
      imgIndex: 1
      // versionView: false, // 是否展示跳转IM的版本
    };
  },
  async onLoad(options) {
    if (options && options.id) {
      this.outId = options.id
      this.$statis({
        action: 'VISIT',
        page: 'pages/recharge/recharge',
        'activityPayId': options.id ? options.id : ''
      })
    }
    if (options && options.batchId) {
      getApp().globalData.batchId = options.batchId
      uni.setStorageSync('batchId', options.batchId)
    }
    await this.getDetail();

    // let versionList = [
    //   '22.2.1', '22.2.2', '22.2.3', '22.2.4', '22.2.0', '22.3.0', '22.3.1', '22.3.2', '22.4.0', '22.4.1', '22.4.2', '22.4.3', '22.5.0', '22.5.1', '22.5.2'
    // ]
    // let nowVerSionArr = nowVerSion.split('.')
    // //  剧多多配合测试的判断限制非抖音端支付
    // // ['Douyin', 'douyin', 'devtools'].includes(nowAppName) && 
    // if (isIos && (versionList.includes(nowVerSion) || (+nowVerSionArr[1] > 2 && +nowVerSionArr[0] > 21) || +nowVerSionArr[0] > 22 || nowVerSion === '6.6.3')) {
    //   this.versionView = true
    // } else {
    //   this.versionView = false
    // }
    getApp().globalData.path = "/pages/recharge/recharge";
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: async function () {
    //#ifdef MP-TOUTIAO
    await this.getShareBatchId()
    //#endif
    var shareJson = {
      path: '/pages/recharge/recharge',
      data: {
        page: 'recharge',
        // sharePosition: '/pages/recharge/recharge',
        // from: '/position/share/share',
        // sharePage: '/pages/recharge/recharge',
        id: this.outId,
      }
    };
    // 达人分享批次
    console.log(getApp().globalData.shareBatchId)
    if (getApp().globalData.shareBatchId) {
      shareJson.channel = 'video'
      shareJson.extra = {
        hashtag_list: ['精彩短剧热播中👈']
      }
    }
    shareJson.title = '😲天呐，大福利❗ 点我领❗精彩爽剧看不停，快看你喜不喜欢~'
    shareJson.introduce = '🉐点我领取，精彩爽剧看不停，快看你喜不喜欢~'
    shareJson.type = 'dySpecial'
    shareJson.imageUrl = `https://res.qiguoread.com/staticResources/fellow_townsman/image/cz_share${this.imgIndex}.png`
    return this.formatShare(shareJson);
  },

  async onShow() {
    this.imgIndex = Math.floor(Math.random() * 2) + 1 // 生成1或2的随机整数
    this.getDetail();

  },
  onUnload() { },
  onHide() { },
  methods: {
    async getShareBatchId() {
      let res = await this.zwyRequest({
        url: '/cdp/spread_channel/batch/generate',
        method: 'POST',
        data: {
          title: '抖音充值页'
        }
      })
      if (res && res.batchId) {
        console.log('getShareBatchId', res);
        getApp().globalData.shareBatchId = res.batchId;
      }
    },
    getSection() {
      this.zwyRequest({
        url: "/cdp/section_group",
        method: "GET",
        data: {},
      }).then((res) => {
        this.sectionList = res;
        this.$forceUpdate();
        console.log("section_group", res);
      });
    },
    async activityBack() {
      let _this = this
      if (!_this.detail.closed && _this.retrieveFlag) {
        let res = await this.zwyRequest({
          url:
            "/wealth/api/activity_pay/platform/pop_ups_retrieve?outId=" +
            _this.outId,
          method: "GET",
          isBiz: true,
          contentType: "application/json;charset=utf-8",
          showLastPage: true,
        });
        if (res.data) {
          _this.showWlPop()
          // this.$emit("showWlPop", true);
          console.log(res, "1111111111111");
        } else {
          _this.goIndex();
        }
      } else {
        _this.goIndex();
      }
    },
    goIndex() {
      uni.switchTab({
        url: "/pages/fx_xjc/fx_xjc",
      });
    },

    countFinish() {
      this.getDetail();
    },
    countFail(e) { },

    getDetail() {
      this.zwyRequest({
        url: "/wealth/api/activity_pay/platform/activity/" + this.outId,
        method: "GET",
        data: {},
      }).then((res) => {
        this.detail = res;
        this.startTime = res.startTime;
        this.endTime = res.endTime;
        let tempTime = parseInt(this.startTime) - new Date().getTime();
        if (tempTime > 0 && !res.closed) {
          this.popupType = "activityFail";
          this.$refs.zwyPopupAll.show("mid");
        }
        if (res.vipDay.length > 0) {
          this.tabTitle = "周六会员日5折专区";
        }
        if (res.normal.length == 3) {
          this.moneyObj = res.normal[this.currentIndex];
        }
        if (!res.retrieve) {
          this.retrieveFlag = false
        }
        if (res.vipDay.length == 3) {
          this.moneyObjVip = res.vipDay[this.currentIndex];
        }
        this.max = this.getMaxIndex();
        this.min = this.getMinIndex();
        this.maxVip = this.getMaxIndexVip();
        this.minVip = this.getMinIndexVip();
        console.log(this.max, "=========99999999999");
        console.log(this.detail, "=========this.detail");
      });
    },

    clickItem: zUtil.throttle(function (item, index) {
      console.log(item, "(item)");
      this.currentIndex = index;
      this.moneyObj = item;
      this.moneyObjVip = item;
    }, 600),

    watchJuji() {
      this.goIndex();
    },
    hidePopup() {
      this.$refs.zwyPopupAll.closeNoAni();
    },
    close: function () {
      this.emit("close", {}, {});
    },
    popupIsClose() {
      if (this.popupType == "popupDingyue") this.close();
    },
    rechargeClosed() {
      this.popupType = "activityEnd";
      // page="pages/recharge/recharge"
      this.$refs.zwyPopupAll.show('mid')
    },
    showWlPop(e) {
      this.popupType = "wanliuSuccess";
      this.$refs.zwyPopupAll.show('mid')
      this.zwyRequest({
        url: `/wealth/api/activity_pay/platform/${this.outId}/save_pop_ups_retrieve_log`,
        method: "post",
        data: {},
      }).then((res) => {
        console.log(res, "res11111111");
      });
      console.log("点击了返回");
    },
    closeWlPop() {
      this.$refs.zwyPopupAll.closeNoAni();
    },


    getMaxIndex() {
      let index = null;
      let max = 0;
      for (let i = 0; i < this.detail.normal.length; i++) {
        if (this.detail.normal[i].moneyFen >= max) {
          max = this.detail.normal[i].moneyFen;
          index = i;
        }
      }
      return index;
    },
    getMinIndex() {
      let index = null;
      let min = 9999;
      for (let i = 0; i < this.detail.normal.length; i++) {
        if (this.detail.normal[i].moneyFen <= min) {
          min = this.detail.normal[i].moneyFen;
          index = i;
        }
      }
      return index;
    },
    getMaxIndexVip() {
      let index = null;
      let max = 0;
      for (let i = 0; i < this.detail.vipDay.length; i++) {
        if (this.detail.vipDay[i].moneyFen >= max) {
          max = this.detail.vipDay[i].moneyFen;
          index = i;
        }
      }
      return index;
    },
    getMinIndexVip() {
      let index = null;
      let min = 9999;
      for (let i = 0; i < this.detail.vipDay.length; i++) {
        if (this.detail.vipDay[i].moneyFen <= min) {
          min = this.detail.vipDay[i].moneyFen;
          index = i;
        }
      }
      return index;
    },
    rechargeBtnClick: zUtil.throttle(function (e) {
      this.currentIndex = e.currentTarget.dataset.index;
      console.log(e.currentTarget.dataset.item.moneyFen, "===========");
      if (this.detail.closed) {
        this.rechargeClosed();
        return;
      } else if (this.detail.availableNumber <= 0) {
        this.popupType = "timesOut";
        this.$refs.zwyPopupAll.show("mid");
        return;
      }
      let header = {
        "content-type": "application/json;charset=UTF-8",
        // 'episodic-drama-id': this.videoInfo.id ? String(this.videoInfo.id) : '0',
        // 'compilations-id': this.videoInfo.compilationsId ? String(this.videoInfo.compilationsId) : '0'
      }
      // if (this.versionView) {
      //   header['ios-pay-version'] = true
      // } else {
      //   header['ios-pay-version'] = false
      // }
      this.zwyRequest({
        header: header,
        method: "post",
        url: "/wealth/api/pay_client/top_up_preorder",
        data: {
          moneyFen: e.currentTarget.dataset.item.moneyFen,
          payUse: "FOR_PLATFORM_BALANCE",
          useId: 3,
          buttonId: e.currentTarget.dataset.item.buttonId,
        },
      }).then(async (res) => {
        //#ifdef MP-TOUTIAO
        if (res) {
          let orderInfo = {
            order_id: res.touTiaoApi.orderId,
            order_token: res.touTiaoApi.orderToken
          };
          /**
           * 区分跳转H5充值还是直接小程序拉取支付
           * 22.2.0版本 且是IOS时跳转客服走H5充值
           */
          // if(this.versionView) {
          // 	this.orderMoney = item.moneyFen ? (item.moneyFen / 100).toFixed(2) : 0
          // 	this.postMessageH5IosPay({
          // 		...orderInfo,
          // 		url: res.touTiaoApi.url,
          // 		clientOrderId: res.orderId
          // 	})
          // } else {
          uni.pay({
            service: 5,
            orderInfo: orderInfo,
            success: resPay => {
              console.log('success', resPay);
              this.getOrderInfo(res.orderId);
            },
            fail: resPay => {
              console.log('fail', resPay);
            }
          });
          // }

        }
        //#endif
        //#ifdef MP-KUAISHOU
        if (res) {
          let orderInfo = {
            order_no: res.kuaiShouApi.orderNo,
            order_info_token: res.kuaiShouApi.orderInfoToken
          };
          ks.pay({
            serviceId: '1',
            orderInfo: orderInfo,
            success: resPay => {
              console.log('success', resPay);
              this.getOrderInfo(res.orderId);
            },
            fail: resPay => {
              console.log('fail', resPay);
            }
          });
        }
        //#endif
      });
    }, 600),
    getOrderInfo(orderId) {
      this.zwyRequest({
        header: {
          'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
        },
        method: 'post',
        url: `/wealth/api/pay_order/done?orderId=${orderId}`,
        data: { orderId: orderId }
      }).then(res => {
        console.log('getOrderInfo-111111', res);
        if (!res) {
          uni.showToast({
            title: '订单未支付',
            icon: 'none'
          });
        }
        if (res && res.payStatus == 'BE_READY') {
          uni.showToast({
            title: '充值成功',
            icon: 'none'
          });
          this.popupType = 'chongzhiSuccess'
          this.$refs.zwyPopupAll.show('mid')
        }
      });
    },
    async postMessageH5IosPay(obj) {
      try {
        let {
          clientOrderId,
          order_id,
          order_token,
          url
        } = obj
        this.imObj.orderId = order_id
        this.imObj.orderToken = order_token
        this.imObj.url = url

        this.zwyRequest({
          header: {
            'content-type': 'application/json;charset=UTF-8'
          },
          method: 'post',
          url: `/wealth/api/douyin_im/saveH5PayUrl`,
          data: {
            orderId: clientOrderId,
            dyOrderId: order_id,
            dyH5PayUrl: url,
            dyH5PayToken: order_token
          }
        }).then(res => {
          console.log(res)

          // 展示IM按钮
          this.viewImBox = true
        })


      } catch (error) {
        console.log(error)
      }
    },
  },
};
</script>
<style scoped lang="scss">
.rechargeBtn,
.rechargeTimer {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}

.rechargeTimer {
  top: 12rpx;
  height: 55rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 24rpx;
  color: #ffffff;
  margin: 0 24rpx;
  z-index: 99;
}

.rechargeTimer-right {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  height: 50rpx;
  padding: 0rpx 41rpx 0rpx 41rpx;
  background-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0px -2px 5px 0px rgba(227, 202, 246, 0.8);
  border-radius: 25rpx;
}

// .rechargeTimer1 {
//   width: 100%;
//   position: absolute;
//   /* top: 20rpx; */
//   height: 55rpx;
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   font-size: 24rpx;
//   color: #FFFFFF;
//   z-index: 99;
//   background-color: rgba(0, 0, 0, 0.2);
// }

.hoverClass {
  opacity: 0.8 !important;
}

.endBox {
  position: relative;
  width: 380rpx;
  height: 260rpx;
  background: linear-gradient(0deg, #fde8c7, #fff7f0);
  border-radius: 20rpx;
  padding: 42rpx 0 40rpx 0;
}

.endBox1 {
  position: relative;
  width: 380rpx;
  height: 421rpx;
  background: linear-gradient(0deg, #fde8c7, #fff7f0);
  border-radius: 20rpx;
  padding: 42rpx 0 40rpx 0;
}

.endDes,
.endTitle,
.endBtn,
.timesOut {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}

.endTitle {
  top: 38rpx;
  font-size: 36rpx;
  color: #a0411d;
  text-align: center;
}

.endTImg {
  position: absolute;
  top: -78rpx;
  width: 380rpx;
  height: 421rpx;
}

.endDes {
  color: #c88e6a;
  top: 90rpx;
  font-size: 28rpx;
}

.endBtn {
  position: absolute;
  bottom: 40rpx;
  text-align: center;
  width: 225rpx;
  height: 57rpx;
  line-height: 57rpx;
  background: linear-gradient(-18deg, #f91106 0%, #ff5d2d 100%);
  border-radius: 29px;
  font-size: 32rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #fff7f0;
}

.endHover {
  background-color: #e5e5e5;
}

.timesOut {
  top: 73rpx;
  color: #262626;
  font-size: 32rpx;
}

.recharge-box {
  position: absolute;
  width: calc(100% - 50rpx);
  background: #fbc6a6;
  border-radius: 20rpx;
  padding: 16rpx 13rpx 29rpx 16rpx;
  top: 832rpx;
  margin: 0 25rpx;
}

.recharge-box-leng {
  position: absolute;
  width: calc(100% - 50rpx);
  background: #f2f4f7;
  border-radius: 20rpx;
  padding: 16rpx 13rpx 29rpx 16rpx;
  top: 832rpx;
  margin: 0 25rpx;
}

.recharge-item {
  height: 202rpx;
  display: flex;
  align-items: center;
  padding-left: 25rpx;
  background: url("https://res.qiguoread.com/staticResources/fellow_townsman/image/dangwei_bg.png");
  background-size: 100% 100%;
}

.recharge-item-leng {
  height: 202rpx;
  display: flex;
  align-items: center;
  padding-left: 25rpx;
  background: url("https://res.qiguoread.com/staticResources/fellow_townsman/image/dangwei_jinbi_leng.png");
  background-size: 100% 100%;
}

.recharge-item1 {
  height: 270rpx;
  background: linear-gradient(0deg, #fde8c7, #fff7f0);
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  padding-left: 25rpx;
}

.recharge-item-leng1 {
  height: 270rpx;
  background: linear-gradient(0deg, #ffffff, #fefeff);
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  padding-left: 25rpx;
}

.item-title {
  display: flex;
  align-items: flex-start;
}

.item-money {
  font-size: 37rpx;
  font-family: Source Han Sans CN;
  font-weight: 600;
  color: #A0411D;
}

.item-money-leng {
  font-size: 36rpx;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #6a1200;
}

.activity {
  width: 100%;
  background: linear-gradient(0deg, #fde8c7, #fff7f0);
  border-radius: 20rpx;
  position: relative;
  display: flex;
  margin-top: 13px;
}

.activity-leng {
  background: linear-gradient(0deg, #ffffff, #fefeff);
  width: 100%;
  border-radius: 20rpx;
  position: relative;
  display: flex;
  margin-top: 13px;
}

.activity-title {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 216rpx;
  height: 53rpx;
  background: #ff523a;
  border-radius: 0px 0px 20rpx 20rpx;
  text-align: center;
  color: #ffffff;
}

.activity-title-leng {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 216rpx;
  height: 53rpx;
  background: #6ea4f5;
  border-radius: 0px 0px 20rpx 20rpx;
  text-align: center;
  color: #ffffff;
}

.activity-info {
  margin: 74rpx 0 36rpx 23rpx;
  font-size: 26rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #a94407;
}

.activity-info-leng {
  margin: 74rpx 0 36rpx 23rpx;
  font-size: 26rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #555555;
}

.activity-yuan {
  width: 6rpx;
  height: 6rpx;
  background: #a94407;
  border-radius: 50%;
  border-radius: 50%;
  margin-right: 20rpx;
}

.activity-yuan-leng {
  width: 6rpx;
  height: 6rpx;
  background: #555555;
  border-radius: 50%;
  border-radius: 50%;
  margin-right: 20rpx;
}

.recharge-item-btn {
  width: 280rpx;
  height: 66rpx;
  line-height: 66rpx;
  background: linear-gradient(0deg, #ff5d2d, #f91106);
  box-shadow: 0px 0px 10px 0px rgba(251, 46, 21, 0.5);
  border-radius: 33px;
  margin-top: 30rpx;
  font-size: 34rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
}

.recharge-item-btn-leng {
  width: 280rpx;
  height: 66rpx;
  line-height: 66rpx;
  background: linear-gradient(0deg, #f6377a, #e01f32);
  box-shadow: 0px 0px 10px 0px rgba(251, 46, 21, 0.5);
  border-radius: 33px;
  margin-top: 30rpx;
  font-size: 34rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
}

.recharge-list {
  width: 100%;
  background: linear-gradient(0deg, #fde8c7, #fff7f0);
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 19px 31px 16px;
  /* margin-bottom: 20px; */
}

.recharge-list-leng {
  width: 100%;
  background: linear-gradient(0deg, #ffffff, #fefeff);
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 19px 31px 16px;
}

.list-item-active {
  height: 244rpx;
  padding: 0rpx 0rpx 24rpx 0rpx;
  width: 191rpx;
  background: #fee2b8;
  border-radius: 10rpx;
  font-size: 12px;
  /* width: 90px; */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  border: 3rpx solid #ff6801;
}

.list-item {
  height: 244rpx;
  box-shadow: 0px 1px 7px 0px rgba(236, 127, 35, 0.2);
  border-radius: 10px;
  padding: 0rpx 0rpx 24rpx 0rpx;
  width: 191rpx;
  font-size: 12px;
  /* width: 90px; */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}

.list-item-active-song {
  height: 244rpx;
  padding: 0rpx 0rpx 0rpx 0rpx;
  width: 191rpx;
  background: #fee2b8;
  border-radius: 10rpx;
  font-size: 12px;
  /* width: 90px; */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  border: 3rpx solid #ff6801;
}

.list-item-song {
  height: 244rpx;
  box-shadow: 0px 1px 7px 0px rgba(236, 127, 35, 0.2);
  border-radius: 10px;
  padding: 0rpx 0rpx 0rpx 0rpx;
  width: 191rpx;
  font-size: 12px;
  /* width: 90px; */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}

.list-item-active-leng {
  height: 244rpx;
  background: #ffdad9;
  border-radius: 10px;
  width: 191rpx;
  font-size: 12px;
  /* width: 90px; */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  border: 3rpx solid #ff5d75;
}

.list-item-leng {
  box-shadow: 0px 1px 7px 0px rgba(181, 188, 198, 0.4);
  border-radius: 10px;
  height: 244rpx;
  width: 191rpx;
  font-size: 12px;
  /* width: 90px; */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}

.item-top {
  min-width: 132rpx;
  height: 36rpx;
  padding: 0 20rpx;
  background: linear-gradient(-18deg, #f97544, #ed1b26);
  border-radius: 18rpx 18rpx 18rpx 0rpx;
  position: absolute;
  top: -8px;
  left: 0;
  text-align: center;
  font-weight: 500;
  color: #ffffff;
}

.item-top-leng {
  min-width: 132rpx;
  height: 36rpx;
  padding: 0 20rpx;
  background: linear-gradient(-18deg, #ff6663, #ef162a);
  border-radius: 18rpx 18rpx 18rpx 0rpx;
  position: absolute;
  top: -8px;
  left: 0;
  text-align: center;
  font-weight: 500;
  color: #ffffff;
}

.item-money2 {
  font-size: 42rpx;
  font-family: Arial;
  font-weight: bold;
  color: #773005;
  margin-top: 10px;
}

.item-present {
  font-size: 30rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #a26b49;
}

.item-money1 {
  font-size: 40rpx;
  font-family: Arial;
  font-weight: bold;
  color: #e3253c;
  margin-top: 10px;
}

.item-present1 {
  font-size: 30rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #df1533;
}

.wabliu_Box {
  width: 542rpx;
  height: 607rpx;
  /* display: flex;
  align-items: center;
  padding-left: 25rpx; */
  background: url("https://res.qiguoread.com/staticResources/fellow_townsman/image/wanliu_icon.png");
  background-size: 100% 100%;
}

.wabliu-btn {
  width: 392rpx;
  height: 88rpx;
  line-height: 88rpx;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 62rpx;
  text-align: center;
  font-size: 36rpx;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #db030a;
  background: url("https://res.qiguoread.com/staticResources/fellow_townsman/image/wanliu_btn1.png");
  background-size: 100% 100%;
}

.wabliu-Title {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: 140rpx;
  font-family: Arial;
  font-weight: bold;
  color: #ff4742;
  padding-top: 163rpx;
}

.wabliu-Title-money {
  font-size: 50rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #ff4742;
}

.wabliu-num {
  font-size: 140rpx;
  font-family: Arial;
  font-weight: bold;
  color: #ff4742;
  line-height: 120rpx;
}

.wabliu-lijian {
  width: 42rpx;
  height: 80rpx;
  margin-left: 8rpx;
  margin-bottom: 10rpx;
}

.wabliu-endDes {
  font-size: 30rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ff997f;
  margin-top: 35rpx;
  text-align: center;
}

.wabliu-closeImg {
  position: absolute;
  bottom: -66rpx;
  width: 50rpx;
  height: 50rpx;
  left: 50%;
  transform: translateX(-50%);
}

.activity_Box {
  width: 380rpx;
  height: 330rpx;
  background: linear-gradient(0deg, #fde8c7, #fff7f0);
  border-radius: 20rpx;
}

.activity-Title {
  font-size: 34rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #a0411d;
}

.activity-img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -45rpx;
  width: 428rpx;
  height: 88rpx;
}

.activity-Title {
  padding-top: 83rpx;
  font-size: 34rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #a0411d;
  text-align: center;
}

.activity-time {
  margin-top: 21rpx;
  text-align: center;
}

.rechargeBtn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0rpx;
  width: 100%;
  height: 146rpx;
  background: #ffffff;
  z-index: 99;
}

.recharge-btn {
  width: 628rpx;
  height: 95rpx;
  background: linear-gradient(-18deg, #f97544, #ed1b26);
  border-radius: 48rpx;
  font-size: 40rpx;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
  margin-top: 26rpx;
}

.activi-item-top {
  min-width: 132rpx;
  height: 36rpx;
  padding: 0 20rpx;
  background: linear-gradient(-18deg, #f97544, #ed1b26);
  border-radius: 18rpx 18rpx 18rpx 0rpx;
  position: absolute;
  top: -8px;
  left: -6rpx;
  text-align: center;
  font-weight: 500;
  color: #ffffff;
}

.activi-item-top-leng {
  min-width: 132rpx;
  height: 36rpx;
  padding: 0 20rpx;
  background: linear-gradient(-18deg, #ff6663, #ef162a);
  border-radius: 18rpx 18rpx 18rpx 0rpx;
  position: absolute;
  top: -8px;
  left: -6rpx;
  text-align: center;
  font-weight: 500;
  color: #ffffff;
}

.item-song {
  width: 100%;
  background: linear-gradient(-18deg, #FF6663, #EF162A);
  border-radius: 0rpx 0rpx 10rpx 10rpx;
  height: 36rpx;
  text-align: center;
  line-height: 36rpx;
  font-size: 24rpx;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #FFFFFF;
  margin-top: 6rpx;
}

.activi-item-song {
  width: 100%;
  background: linear-gradient(-18deg, #FF6663, #EF162A);
  border-radius: 0rpx 0rpx 10rpx 10rpx;
  height: 36rpx;
  text-align: center;
  line-height: 36rpx;
  font-size: 24rpx;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #FFFFFF;
  margin-top: 6rpx;
}

.item-song-leng {
  width: 100%;
  background: linear-gradient(-18deg, #FF6663, #EF162A);
  border-radius: 0rpx 0rpx 10rpx 10rpx;
  height: 36rpx;
  text-align: center;
  line-height: 36rpx;
  font-size: 24rpx;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #FFFFFF;
  margin-top: 6rpx;
}

.activi-item-song-leng {
  width: 103%;
  background: linear-gradient(-18deg, #FF6663, #EF162A);
  border-radius: 0rpx 0rpx 10rpx 10rpx;
  height: 36rpx;
  text-align: center;
  line-height: 36rpx;
  font-size: 24rpx;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #FFFFFF;
  margin-bottom: -3rpx;
  margin-top: 6rpx;
}
</style>